﻿@using Ocelot.ConfigEditor
@inject IConfigEditorService ConfigEditorService

@model Ocelot.ConfigEditor.Editor.Models.IndexViewModel

@{
    ViewData["Title"] = "Home Page";
}

<div class="row">
    <div class="col-md-2 col-vertical-offset-2">
        <div class="row">
            <a asp-action="CreateReRoute"><span class="fas fa-plus"></span> Create</a>
        </div>
        <div class="row">
            <a data-toggle="modal" data-target="#upload-modal" href="#"><span class="fas fa-upload"></span> Upload</a>
        </div>
    </div>
    <div class="col-md-10">
        <h2>ReRoutes</h2>
        <ul>
            @foreach (var route in Model.FileConfiguration.ReRoutes)
            {
                var toolTip = string.Empty;
                for (var i = 1; i < route.DownstreamHostAndPorts.Count; i++)
                {
                    toolTip += $"<div>{route.DownstreamHostAndPorts[i].Host}:{route.DownstreamHostAndPorts[i].Port}</div>";
                }
                <li>
                    <div>
                        <a asp-action="EditReRoute" asp-route-id="@route.GetId()" >
                            @($"{route.DownstreamScheme}://{route.DownstreamHostAndPorts[0].Host}:{route.DownstreamHostAndPorts[0].Port}{route.DownstreamPathTemplate}")
                        </a>
                        @if (!string.IsNullOrEmpty(toolTip))
                        {
                            <span class="fas fa-ellipsis-h" data-toggle="tooltip" data-placement="right" data-html="true" title="@toolTip"></span>
                        }
                    </div>
                </li>
            }
        </ul>
    </div>
</div>

<div class="modal fade" id="upload-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="upload-modal-title">Upload Configuration File</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="upload-config-form" method="post" enctype="multipart/form-data" asp-controller="Editor" asp-action="UploadRoutes">
                    <div class="form-group">
                        <div class="col-md-10">
                            <p>Upload an Ocelot configuration file:</p>
                            <input type="file" name="configFile" accept=".json" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" form="upload-config-form" class="btn btn-primary">Upload</button>
            </div>
        </div>
    </div>
</div>

@section Scripts
{
    @if (ConfigEditorService.IsReloadRequired())
    {
        <script type="text/javascript">
            var defaults = configEditor.getNotifyDefaults();
            defaults.type = "warning";
            defaults.delay = 0;
            defaults.allow_dismiss = false;
            $.notify({ message: "There are pending configuration changes. Click to reload.", icon: "fas fa-sync" }, defaults);
            $(document).on("click",
                ".alert-warning",
                function() {
                    $("#reload-form").submit();
                });
        </script>
        <form id="reload-form" method="post" action="@Url.Action("Reload")"></form>
    }

    @if (Model.Error.HasError)
    {
        <script type="text/javascript">
            var defaults = configEditor.getNotifyDefaults();
            defaults.type = "danger";
            defaults.delay = 10000;
            $.notify({ message: "@Model.Error.ErrorMessage", icon: "fas fa-exclamation-circle" }, defaults);
        </script>
    }
}
